<template>
  <view class="_tab_bar">
    <view
      class="_tab_bar_inner"
      :style="{
        height: height,
        background: `url(${$img('/static/img2/cc189.png')})`,
        'z-index': zIndex
      }"
    >
      <view
        class="_tab_bar_inner_item"
        v-for="(item, i) in tabBar"
        :key="i"
        :class="{
          act: index === i
        }"
        :style="{
          width: `${Math.floor(100 / tabBar.length)}%`
        }"
        @click="tabChange(item)"
      >
        <view class="_tab_bar_inner_item_icon icon">
          <image :src="index === i ? item.icona : item.icon" lazy-load></image>
        </view>

        <view class="_tab_bar_inner_item_title">{{ item.title }}</view>
      </view>
    </view>

    <view
      class="_tab_bar_placeholder"
      :style="{
        height: height
      }"
    ></view>
  </view>
</template>

<script>
// import { mapGetters } from 'vuex'

export default {
  name: 'tab-bar',

  props: {
    index: {
      type: Number,
      default: 88
    },
    height: {
      type: String,
      default: `158rpx`
    },
    // background: {
    //   type: String,
    //   default: `#010101`
    // },
    zIndex: {
      type: Number,
      default: 88
    }
  },

  data() {
    return {
      tabBar: [
        {
          id: 1,
          title: '首页',
          path: '/pages/shouye/index',
          icon: this.$img('/static/img2/tabbar/1.png'),
          icona: this.$img('/static/img2/tabbar/1a.png')
        },
        {
          id: 2,
          title: '积分赏',
          path: '/pages/infinite/index',
          icon: this.$img('/static/img2/tabbar/2.png'),
          icona: this.$img('/static/img2/tabbar/2a.png')
        },
        {
          id: 3,
          title: '商城',
          path: '/pages/mall/mall',
          icon: this.$img('/static/img2/tabbar/3.png'),
          icona: this.$img('/static/img2/tabbar/3a.png')
        },
        {
          id: 4,
          title: '盒柜',
          path: '/pages/sangdai/sangdai',
          icon: this.$img('/static/img2/tabbar/4.png'),
          icona: this.$img('/static/img2/tabbar/4a.png')
        },
        {
          id: 5,
          title: '我的',
          path: '/pages/user/index',
          icon: this.$img('/static/img2/tabbar/5.png'),
          icona: this.$img('/static/img2/tabbar/5a.png')
        }
      ]
    }
  },

  // computed: {
  //   ...mapGetters(['tabBar'])
  // },

  beforeCreate() {
    uni.hideTabBar()
  },

  methods: {
    tabChange(item) {
      this.$c.to({
        type: 3,
        url: item.path
      })
    }
  }
}
</script>

<style lang="scss">
._tab_bar {
  width: 100%;

  ._tab_bar_inner {
    width: 100%;
    position: fixed;
    left: 0;
    bottom: 0;
    display: flex;

    ._tab_bar_inner_item {
      height: 100%;
      box-sizing: border-box;
      display: flex;
      flex-flow: column nowrap;
      align-items: center;
      position: relative;
      padding: 20rpx 0 0;

      ._tab_bar_inner_item_icon {
        width: 42rpx;
        height: 42rpx;
      }

      ._tab_bar_inner_item_title {
        font-family: Alimama ShuHeiTi, Alimama ShuHeiTi;
        font-weight: 700;
        font-size: 22rpx;
        color: #ffffff;
        text-shadow: 0 0 3px #000000, 0 0 3px #000000, 0 0 3px #000000, 0 0 3px #000000;
      }

      &.act {
        ._tab_bar_inner_item_title {
          color: #ff0013;
        }
      }
    }
  }

  ._tab_bar_placeholder {
  }
}
</style>
